<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/cart.css">
    <script src="./js/jquery-1.12.3.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <style>
        table {
            width: 990px;
        }

        table,
        tr,
        td,
        th {
            border: 1px solid #000;
        }
        th{
            background: #f3f3f3;

        }
        td{
            background: #eaf9ff;
            /* height: 100px; */
        }
        span{
            /* display: inline-block; */
            background: #f3f3f3;
            /* height: 100px; */
            font-weight: 700;
            color: red;
        }
    </style>
</head>
<body>
    <div class="header1">
        <div class="header1-1">
            <ul class="header1-left">
                <li><a href="javascript:bookmark();"><em>&#9733</em>收藏本站</a></li>
                <li class="address">
                    <a href="#">送货至&nbsp <span id="province">安徽</span></a>
                    <ul id="ubiao">
                        <li class="clearfix"><span>A</span><a href="#">安徽</a></li>
                        <li class="clearfix"><span>B</span><a href="#">北京</a></li>
                        <li class="clearfix"><span>C</span><a href="#">重庆</a></li>
                        <li class="clearfix"><span>G</span><a href="#">广东</a>
                             <a href="#">广西</a>
                             <a href="#">贵州</a>
                             <a href="#">甘肃</a>
                        </li>
                        <li class="clearfix"><span>F</span><a href="#">福建</a></li>
                        <li class="clearfix"><span>H</span><a href="#">河北</a>
                            <a href="#">黑龙江</a>
                            <a href="#">海南</a>
                            <a href="#">湖北</a>
                            <a href="#">湖南</a>
                            <a href="#">河南</a>
                        </li>
                        <li class="clearfix"><span>J</span><a href="#">江苏</a>
                             <a href="#">吉林</a>
                             <a href="#">江西</a>
                        </li>
                        <li class="clearfix"><span>L</span><a href="#">辽林</a></li>
                        <li class="clearfix"><span>N</span><a href="#">内蒙古</a>
                            <a href="#">宁夏</a>
                        </li>
                        <li class="clearfix"><span>Q</span><a href="#">青海</a></li>
                        <li class="clearfix"><span>S</span><a href="#">上海</a>
                            <a href="#">山东</a>
                            <a href="#">山西</a>
                            <a href="#">四川</a>
                            <a href="#">陕西</a>
                        </li>
                        <li class="clearfix"><span>T</span><a href="#">天津</a></li>
                        <li class="clearfix"><span>X</span><a href="#">西藏</a>
                            <a href="#">新疆</a>
                        </li>
                        <li class="clearfix"><span>Y</span><a href="#">云南</a></li>
                        <li><span>Z</span><a href="#">浙江</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="header1-right">
                <li id="Close"><a href="#">退出登录</a></li>
                <li><a href="/login.html">请登录</a></li>
                <li><a href="/register.html">注册</a></li>
                <li><a href="http://passport.111.com.cn/sso/login.action?ReturnUrl=//my.111.com.cn/ucenter/orderList.action">我的订单</a></li>
                <li class="my1yao">
                    <a href="https://my.111.com.cn/ucenter/myCenter.action">我的1药网</a>
                    <ul>
                        <li class="yao"><a href=""></a>我的优惠券</li>
                        <li class="yao"><a href=""></a>我的收藏夹</li>
                        <li class="yao"><a href=""></a>商品评价</li>
                        <li class="yao"><a href=""></a>我的私人定制</li>
                    </ul>
                </li>
                <li><a href="https://www.111.com.cn/errorpage.html">帮助中心</a></li>
                <li><a href="javascript:;">在线客服</a></li>
                <li>400-007-0958|</li>
                <li class="shouji"><a href="javascript:void(0)"><i><img src="images/手机.png" alt=""></i>&nbsp手机APP</a>
                    <ul>
                        <li class="FL"><img src="images/2wm.jpg" alt=""></li>
                        <li class="FL">
                            <p>1药网客户端</p>
                            <p class="app">APP专享价更优惠</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="header2">
        <div class="header2-1">

        </div>
    </div>
    <div class="contain1">
        <div class="contain1-1">
              <p><img src="images/我的购物车1_03.gif" alt=""></p>
              <p><a href="">我的购物车</a></p>
        </div>
    </div>
    <div class="contain2">
            <div class="contain2-1">
                    <table>
                            <thead>
                                <tr>
                                    <th style="width: 40px"><input type="checkbox" id="all">全选</th>
                                    <th style="width: 350px">商品</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                    <th>小计</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="tab">
                                <!-- ctr+d ctr+k -->
                                <td ><input type="checkbox"></td>
                                <td><img src="" alt="">商品</td>
                                <td >单价</td>
                                <td >数量</td>
                                <td >小计</td>
                                <td >操作</td>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td style="text-align: right" colspan="6">
                                        <span>总金额</span><span id="totals"></span>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
            </div>
        </div>
    <div class="footer4">
            <div class="footer4-1">
                <ul class="clearfix">
                    <li><a href="#">关于111集团&nbsp|</a></li>
                    <li><a href="#">&nbsp关于1药网&nbsp|</a></li>
                    <li><a href="#">&nbsp关于1药城&nbsp|</a></li>
                    <li><a href="#">&nbspInvestor Relations&nbsp|</a></li>
                    <li><a href="#">&nbsp诚聘英才&nbsp|</a></li>
                    <li><a href="#">&nbsp直营实体药房</a></li>
                </ul>
                <ul class="clearfix">
                    <li><a href="#">互联网药品信息服务资格证&nbsp|</a></li>
                    <li><a href="#">&nbsp互联网药品交易资格证：粤C20150007&nbsp|</a></li>
                    <li><a href="#">&nbsp连锁营业执照&nbsp|</a></li>
                    <li><a href="#">&nbsp药品营业许可证&nbsp|</a></li>
                    <li><a href="#">&nbsp医疗器械许可证</a></li>
                </ul>
                <ul class="clearfix">
                    <li><a href="#">食品经营许可证&nbsp|</a></li>
                    <li><a href="#">&nbspGSP证书&nbsp|</a></li>
                    <li><a href="#">&nbspICP粤B2-20150066&nbsp|</a></li>
                    <li><a href="#">&nbsp第二类医疗器械经营备案凭证&nbsp|</a></li>
                    <li><a href="#">&nbsp医疗器械网络销售备案</a></li>
                </ul>
                <p>1药网网上药店，国家药监局认证通过的合法网上药店，中国医药电子商务行业的开拓者领跑者。粤ICP备12015869号-1</p>
                <p>公司名称：广东壹号大药房连锁有限公司 公司地址：广东省广州市越秀区共和西路1号2层 联系电话：020-31067218</p>
                <p>Copyright(C)2010-2019 1药网版权所有公安备案号 440104020000743</p>
            </div>
        </div>
</body>
</html>
<script>
        $(function () {
            // if(!window.localStorage.getItem("currentUser")){
            //    return
            // }
             var id=JSON.parse(window.localStorage.getItem("currentUser")).u_id;
            //页面加载就把数据填充到页面的 表格
            $.ajax({
                url: `/api/carts?uid=${id}`,
                // xhrFields: {
                //     withCredentials: true
                // },
                // crossDomain: true,
            }).then(function (res) {
                console.log(res)
                
                var strHtml = ``

                res.forEach((el) => {
                    strHtml += `<tr>
                    <td style="text-align: center"><input type="checkbox"></td>
                    <td><img style="width:50px;height:50px;" src="${el.c_img}" alt="">${el.c_name}</td>
                    <td style="text-align: center">${el.c_price}</td>
                    <td style="text-align: center">
                        <button data-cid=${el.c_id} class="sub">-</button>
                        <input style="width:30px;text-align: center" value=${el.c_num} id="num">
                        <button data-cid=${el.c_id}  class='add'>+</button>
                         </td>
                    <td style="text-align: center; color:red">${el.c_total}</td>
                    <td style="text-align: center"> <a href='JavaScript:void(0)' data-cid=${el.c_id} class='del' >删除</a> </td></tr>
                    `
                });

                $("#tab").html(strHtml);
            })

            //委托 
            // //修改数量的减减
            $("#tab").on("click", ".sub", function () {
                var num = $(this).next("input").val();
                if (num <= 1) {
                    return;
                }
                $(this).next("input").val(num - 1);
                var numA = $(this).next("input").val();
                var price = $(this).parents("td").prev("td").text();
                $(this).parents("td").next("td").text(numA * price);


                var td4s = $("#tab").find(":checked").parents("tr").find("td:eq(4)");
                var totalMoney = 0;
                td4s.each((index, ele) => {
                    totalMoney += $(ele).text() - 0
                })
                $("#totals").text(totalMoney);

                console.log($(this).data("cid"))
                //同时也要修改数据库
                // alert($(this).data("cid"))
                $.ajax({
                    url: "./api/changecarts",
                    type: "post",
                    data: {
                        num: numA,
                        cid: $(this).data("cid"),
                        uid: id
                    }
                }).then((res) => {
                    console.log(res.data)
                    layer.msg("修改完成");
                })

            })

            //修改数量的添加
            $("#tab").on("click", ".add", function () {
                var num = $(this).prev("input").val();

                $(this).prev("input").val(num - 0 + 1);
                var numA = $(this).prev("input").val();
                var price = $(this).parents("td").prev("td").text();
                $(this).parents("td").next("td").text(numA * price)


                //totals 
                var td4s = $("#tab").find(":checked").parents("tr").find("td:eq(4)");
                var totalMoney = 0;
                td4s.each((index, ele) => {
                    totalMoney += $(ele).text() - 0
                })
                $("#totals").text(totalMoney);
           

                //同时也要修改数据库
                // alert($(this).data("cid"))
                $.ajax({
                    url: "./api/changecarts",
                    type: "post",
                    data: {
                        num: numA,
                        cid: $(this).data("cid"),
                        uid: id
                    }
                }).then((res) => {
                    console.log(res)
                    layer.msg("修改完成");
                })
            })

            //单选框绑定点击事件
            $("#tab").on("click", "input[type='checkbox']", function () {

                var td4s = $("#tab").find(":checked").parents("tr").find("td:eq(4)");
                var totalMoney = 0;
                td4s.each((index, ele) => {
                    totalMoney += $(ele).text() - 0
                })
                $("#totals").text(totalMoney);


                $("#all").prop("checked", $("#tab :checked").length == $("#tab [type=checkbox]").length)

            })

            //单选框的 全选
            $("#all").on("click", function () {
                $("#tab [type='checkbox']").prop("checked", $(this).prop("checked"));

                //totals 
                var td4s = $("#tab").find(":checked").parents("tr").find("td:eq(4)");
                var totalMoney = 0;
                td4s.each((index, ele) => {
                    totalMoney += $(ele).text() - 0
                })
                $("#totals").text(totalMoney);

            })

            //删除

            $("#tab").on("click", ".del", function () {

                var cid = $(this).data("cid")
                var uid = id
                var self = this;

                layer.confirm("您确定要删除吗?这么好的东西别的地方买不到的哦", {
                        btn: ["还是走吧", "看看再说"],
                         time: 2000, //20s后自动关闭
                    },
                    function () {
                       
                        //真是删除数据
                        $.ajax({
                            url: "/api/delete",
                            type: "post",
                            data: {
                                cid,
                                uid
                            }
                        }).then(function (res) {
                            if (res.status == 1) {
                                //删除视觉效果
                                $(self).parents("tr").remove();
                                layer.close();
                            }
                        })
                    },
                    function () {

                    }
                )
            })
            $("#Close").on("click",()=>{
                localStorage.clear();
                layer.confirm("您确定要退出吗", {
                    btn: ["记得回来"],
                        time: 2000, //20s后自动关闭
                });
            })

        })
    </script>